<template lang="pug">
.handdraw-option-app(v-if="getMenusData && getMenusData.length")

  .handdraw-option-dia(v-show="showDia" v-if="getPointData.length > 0")
    .handdraw-option-dia-item.flex.hand(
        v-for='(child, ix) in getPointData'
        :key='ix'
        @click.stop='showPointName(child)'
        :class='{active: activePointId == child.point_id}'
      )
      p.handdraw-option-dia-p1.omit {{child.name}}
      p.handdraw-option-dia-p2(@click.stop='showMap(child)' v-if='!child.pano_id') 前往

  .scroll-option-wai
    .handdraw-scroll-wrap
      .handdraw-tab-item(
        v-for='(item, index) in getMenusData'
        :key='index'
        @click='changeOption(item)'
      )
        img(:src='getImageSrc(item)', alt='')
        p(:style='{color: handOptionId==item.id?"#f00":"#999"}') {{item.name}}

</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData, sortId } from '@/utils'

export default {
  data() {
    return {
      active: 0,
      allLen: 1000,
      showDia: false,
      activePointId: '',
    }
  },
  computed: {
    ...mapGetters(['handdrawData', 'handOptionId', 'handPointId']),
    getPointData() {
      if (this.handdrawData && this.handOptionId) {
        if (this.handdrawData.point_list && this.handdrawData.point_list.length > 0) {
          let arr = this.handdrawData.point_list.filter(item => item.material_id == this.handOptionId)
          return arr
        }
      }
      return []
    },
    getMenusData() {
      if (this.handdrawData && this.handdrawData.overview_menu_items) {
        let optionsArr = this.handdrawData.overview_menu_items.options
        if (!optionsArr) {
          // 空数据返回
          return []
        }
        return optionsArr
      } else {
        return []
      }
    }
  },
  methods: {
    // 显示地图
    showMap(item) {
      console.log(item)
      let dataMap = `https://uri.amap.com/marker?position=${item.location_lng},${item.location_lat}&name=${item.address}&radius=110&src=mypage&coordinate=gaode&callnative=0&key=b65d581a9e00d6952661f5e0056e3649`
      this.$vgo.emit('iframe:map', dataMap)
    },
    // 点击热点数据
    showPointName(item) {
      this.activePointId = item.point_id
      if (item.point_id == this.handPointId) {
        this.$store.dispatch('updateHandPointId', '')
      } else {
        this.$store.dispatch('updateHandPointId', item.point_id)
      }
    },
    // 切换选项卡
    changeOption(item) {
      if (item.id == this.handOptionId) {
        this.showDia = !this.showDia
      } else {
        this.showDia = true
        this.$store.dispatch('updateHandOptionId', item.id)
      }
    },
    getImageSrc(item) {
      if (!!Number(item.file_url)) {
        return `static/images/handdraw/fl${item.file_url}.png`
      } else {
        return item.full_file_url
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.handdraw-option-app
  position absolute !important
  bottom 15px
  z-index 101
  max-height 282px
  overflow-x hidden !important
  overflow-y auto !important
  box-sizing border-box
  // 处理层级
  transform translateZ(1px)
  .handdraw-option-dia
    width 100%
    // max-width 360px
    max-height 228px
    border-radius 5px
    padding 10px
    margin-bottom 10px
    box-sizing border-box
    overflow-y auto
    background-color #fff
    .handdraw-option-dia-item
      box-sizing border-box
      justify-content space-between
      height 40px
      line-height 40px
      &.active
        padding 0 10px
        background-color #dddddd
      .handdraw-option-dia-p1
        color #666
        max-width 70%
      .handdraw-option-dia-p2
        color #00a4f7
  .scroll-option-wai
    background-color #fff
    width 100%
    .handdraw-scroll-wrap
      overflow-x auto
      overflow-y auto
      white-space nowrap
      &::-webkit-scrollbar {display:none}
      .handdraw-tab-item
        cursor pointer
        display inline-block
        padding 5px 15px 0
        text-align center
        overflow hidden
        img
          width 22px
          height 22px
        p
          font-size 12px
          color #999

@media screen and (max-width: 768px)
  .handdraw-option-app
    left 5%
    width 90%
@media screen and (min-width: 769px)
  .handdraw-option-app
    left 30%
    width 40%
</style>